<script setup lang="ts">

interface Props {
  colorValue?: string;
  minWidth?: string;
  minHeight?: string;
}

const props = withDefaults(defineProps<Props>(), {
  colorValue: () => '#ffffff',
  minWidth: () => '50px',
  minHeight: () => '30px'
});

const color = ref(props.colorValue ? props.colorValue : '#ffffff');

</script>

<template>
  <!-- todo 实现传入多个值生成产品色卡 -->
  <div class="color-box" :style="{ backgroundColor:colorValue, minWidth: props.minWidth, minHeight: props.minHeight }">
  </div>
</template>

<style scoped lang="scss">
.color-box {
  margin: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>